<template>
  <view v-if="$accessCheck($Access.PurchaseOrderGetAllPurchase)">
    <view class="keyword-view clearfix">
      <view class="float_left">
        <u-search
          @clear="searchData()"
          @search="searchData()"
          :show-action="false"
          :clearabled="true"
          placeholder="采购单号"
          v-model="search_form.no"
        ></u-search>
      </view>
      <view class="float_right" @click="openSearch"
        ><text class="custom-icon custom-icon-shaixuan"></text
      ></view>
    </view>
    <view class="list-ul">
      <block v-for="(item, index) in purchase_list" :key="index">
        <view
          v-if="$accessCheck($Access.PurchaseOrderGetPurchaseInfoById)"
          class="list-li"
          @click="goPage(`/pagesT/Purchase/PurchaseDetail?id=${item.id}`)"
        >
          <view class="top clearfix">
            <view class="ellipsis float_left">{{ item.supplierName }}</view>
            <view class="float_right">
              <text v-if="item.auditStatus === 2" class="success-status"
                >已审核</text
              >
              <text v-else class="warning-status">待审核</text>
              <u-icon name="arrow-right" size="28" color="#999999"></u-icon>
            </view>
          </view>
          <view class="list-cont">
            <view class="total-money">{{
              $utils.formattedNumber(item.purchaseAmount)
            }}</view>
            <view class="info-li" style="font-size: 28rpx; color: #111111">{{
              item.warehouseName
            }}</view>
            <view class="info-li" @click.stop="copy(item.no)">
              <text style="margin-right: 20rpx">{{ item.no }}</text>
              <u-icon
                name="copy"
                custom-prefix="custom-icon"
                size="22"
              ></u-icon>
            </view>
            <view class="info-li clearfix">
              <text class="float_left">{{
                $u.timeFormat(item.createTime, "yyyy-mm-dd hh:MM:ss")
              }}</text>
              <text class="float_right">采购员：{{ item.buyerName }}</text>
            </view>
          </view>
        </view>
      </block>
    </view>
    <u-loadmore v-if="purchase_list.length" :status="load_status" />
    <view v-else class="empty-view"
      ><u-empty text="暂无数据" mode="list"></u-empty
    ></view>
    <addBtn
      v-if="$accessCheck($Access.PurchaseOrderAddPurchase)"
      url="/pagesT/Purchase/AddPurchase"
    ></addBtn>
    <u-popup v-model="search_show" mode="right">
      <view class="search-pop">
        <view class="form-view">
          <u-form label-width="160rpx" label-position="left">
            <u-form-item label="仓库">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/werahouse/selWerahouse')"
              >
                <text class="float_left ellipsis">{{
                  search_form.warehouseId ? warehouse_name : "请选择"
                }}</text>
                <view
                  class="float_right"
                  @click.stop="clearValue('warehouseId')"
                >
                  <u-icon
                    :name="
                      !search_form.warehouseId
                        ? 'arrow-right'
                        : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
            <u-form-item label-position="top" label="审核状态">
              <text
                v-for="(item, index) in order_status"
                :key="index"
                class="check-li"
                :class="[
                  search_form.auditStatus === item.value ? 'active' : '',
                ]"
                @click="statusChange(item)"
              >
                {{ item.label }}
              </text>
            </u-form-item>
          </u-form>
        </view>

        <view class="search-btn">
          <view class="btn-li btn-reset" @click="clearValue()">重置</view>
          <view class="btn-li btn-submit" @click="searchData">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order_status: [
        { value: 2, label: "已审核" },
        { value: 1, label: "待审核" },
      ],
      search_show: false,
      warehouse_name: "",
      page: 1,
      pageSize: 10,
      total: 0,
      load_status: "nomore",
      purchase_list: [],
      werahouseData: "",
      search_form: {
        no: "",
        auditStatus: "",
        warehouseId: "",
      },
    };
  },
  watch: {
    werahouseData(val) {
      if (val) {
        this.search_form.warehouseId = val.id;
        this.warehouse_name = val.warehouseName;
      }
    },
  },
  onShow() {
    this.searchData();
  },
  onReachBottom() {
    if (this.total / this.pageSize > this.page) {
      this.page += 1;
      this.getAllPurchase();
    }
  },
  onPullDownRefresh() {
    this.searchData();
  },
  methods: {
    clearValue(key) {
      if (!key) {
        this.search_form = {
          no: "",
          auditStatus: "",
          warehouseId: "",
        };
        this.searchData();
      } else {
        this.search_form[key] = "";
      }
    },
    openSearch() {
      this.search_show = true;
    },
    statusChange(row) {
      this.search_form.auditStatus = row.value;
    },
    getAllPurchase() {
      this.load_status = "loading";
      this.$u.api
        .getAllPurchase({
          auditStatus: this.search_form.auditStatus,
          no: this.search_form.no,
          page: this.page,
          pageSize: this.pageSize,
          warehouseId: this.search_form.warehouseId,
        })
        .then((res) => {
          if (this.page === 1) {
            this.purchase_list = res.data;
          } else {
            this.purchase_list = this.purchase_list.concat(res.data);
          }
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        });
    },
    searchData() {
      this.page = 1;
      this.search_show = false;
      this.getAllPurchase();
    },
  },
};
</script>

<style lang="scss" scoped>
.keyword-view {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 20rpx 24rpx;
  background-color: #ffffff;
  z-index: 9;
  .float_left {
    width: 640rpx;
  }
  .float_right {
    line-height: 64rpx;
    width: 50rpx;
    text-align: center;
    color: #666666;
  }
}
.list-ul {
  padding-top: 100rpx;
  .list-li {
    width: 710rpx;
    background-color: #ffffff;
    margin: 20rpx auto;
    border-radius: 20rpx;
    padding: 30rpx 24rpx;
    .top {
      padding-bottom: 20rpx;
      border-bottom: 1px solid #eeeeee;
      .float_left {
        width: 400rpx;
        font-weight: bold;
      }
    }
    .list-cont {
      padding-top: 20rpx;
      position: relative;
      .total-money {
        position: absolute;
        top: 45%;
        right: 0;
        transform: translateY(-50%);
        color: $uni-color-error;
        font-weight: bold;
      }
      .info-li {
        color: #6c6c6c;
        font-size: 24rpx;
        padding-bottom: 10rpx;
      }
    }
  }
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
.search-pop {
  .active {
    border-color: #fb5904 !important;
    color: #fb5904 !important;
  }
}
</style>
